<template>
  <div class="box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" isShowTabbar="false">
      <van-swipe-item v-for="(item,index) in getSwiperImg" :key="index">
        <img :src="item.picUrl" width="100%" height="230px" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <gird class="gird" />
       
    <!-- 全民砍价 -->
    <bargainirg class="active-margin" @go_details="go_details" />
    <!-- 精选专题 -->
    <subjectList class="active-margin" />
    <!-- 人气推荐 -->
    <popularity class="active-margin" />

    <div style="height:1.6rem"></div>
  </div>
</template>

<script>
import gird from "../../components/gird/gird";
import gird_item from "../../components/gird/gird_item";
import bargainirg from "./compontents/bargainirg";
import subjectList from "./compontents/subject";
import popularity from "./compontents/popularity";
export default {
  components: {
    // 九宫格
    gird,
    // 九宫格内容
    gird_item,
    // 全民砍价
    bargainirg,
    // 精选专题
    subjectList,
    // 人气推荐
    popularity
  },
  data() {
    return {};
  },
  computed: {
    getSwiperImg: function() {
      return this.$store.state.homeStore.swiperImg;
    }
  },
  mounted() {
    // 触发action中请求轮播图的数据
    this.$store.dispatch("getSwiperImg");
  },
  methods: {
    go_details(id) {
      this.$store.dispatch("get_goods_details", id);
      this.$router.push({
        path: "/goods_details"
      }),
      this.$loading();
    }
  }
};
</script>

<style scoped>
.box {
  background-color: #fff !important;
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #f5f5f5;
}
.active-margin {
  margin: 0.3rem 0rem;
}
.gird {
  z-index: 999;
}
</style>